<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分步表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../js/lay-module/step-lay/step.css" media="all">
</head>
<body>
<div class="layuimini-container">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin-left:180px;">
                        <div carousel-item>
                            <div>

                                   <form class="layui-form" style="margin-left:180px;margin-top: 20px;  width:500px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">套餐名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="mName" lay-verify="required" lay-reqtext="套餐名不能为空" placeholder="请输入套餐名" value="aaa" class="layui-input">
                                        </div>
                                    </div>  

                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">套餐价格</label>
                                        <div class="layui-input-block">
                                            <input type="text" maxlength="11" name="mPrice" lay-verify="required" lay-reqtext="价格不能为空" placeholder="请输入套餐价格" value="777" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">选择数量</label>
                                        <div class="layui-input-block">
                                            <select name="setMealSpec">
                                                <option value="">--请选择套餐规格--</option>
                                                <option value="0">固定套餐</option>
                                                <option value="1">可选一个</option>
                                                <option value="2">可选两个</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="layui-form-item" hidden>
                                        <div class="layui-input-block">
                                            <input type="input" name="mStatus" value="1" class="layui-input">              
                                        </div>
                                    </div>


                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">套餐描述</label>
                                        <div class="layui-input-block">
                                            <textarea name="mDepict" placeholder="请输入内容"  class="layui-textarea"></textarea>
                                        </div>
                                    </div>

                                    
                                    
                                    <div id="app">
                                        <div class="layui-card">
                                            <div class="layui-card-header" style="margin-left:70px;">
                                                <h1>套餐图片</h1>
                                            </div>
                                            <div class="layui-card-body">
                                                <div class="layui-upload" style="margin-left:70px;">
                                                    <img id="pic" src="../images/combo_02.webp" style="width:100px;height:60px" alt="">
                                                    <button type="button" class="layui-btn" id="browser-pic" style="margin-left:35px">
                                                        <i class="layui-icon">&#xe67c;</i>浏览图片
                                                    </button>

                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="layui-form-item" style="margin-top: 20px;">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>       
                            </div>
                            
                            <div>

                                    <div class="layui-form-item">
                                        <form class="layui-form" style="margin: 0 auto;">
                                        <table id="munu-table"  class="layui-table" lay-filter="munu-table"></table>  
                                        </form>  
                                    </div>
                                    


                                <form class="layui-form" style="margin: 0 auto;">
                                    <div class="layui-form-item" >
                                        <div class="layui-input-block" style="margin-left:320px;">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认添加&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                                
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        套餐添加成功
                                    </div>
                                    
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">再来一餐</button>
                                    <button id="chkMeal" class="layui-btn layui-btn-primary">查看套餐</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use([ 'form', 'step','upload','treetable'], function () {
        var $ = layui.$,
            form = layui.form,
            treetable=layui.treetable,
            upload=layui.upload,
            step = layui.step;

        var mytreelist=[];
        var requrl="http://localhost:8080/restaurant_web_war_exploded/";

        //用于格式化数据
        function init(myvar_TypeId,myvar_TypeName,myisMenu,myparentId){
           return {"var_TypeId":myvar_TypeId,"var_TypeName":myvar_TypeName,"isMenu":myisMenu,"parentId":myparentId};
        }

        $.ajax({
            type:"get",
            url:requrl+"variety/listVariety",
            success:function (res){
                let list=res.data.list;
                for (let index = 0; index < list.length; index++) {
                    if(list[index].varietyTypeId==1001){
                    continue;
                    }
                     mytreelist.push(init(list[index].varietyId,list[index].varietyName,1,list[index].varietyTypeId));
                }          
            }
        }) 
        
        $.ajax({        
            type:"get",
            url:requrl+"varietyType/listVarietyType",
            success:function (res){
                let list=res.data.list;
               for (let index = 0; index < list.length; index++) {
                 if(list[index].varietyTypeId==1001){
                    continue;
                 }
                    mytreelist.push(init(list[index].varietyTypeId,list[index].varietyTypeName,0,-1))
                }
            }
        })

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '66%', //设置容器宽度
            stepWidth: '750px',
            height:'700px',
            stepItems: [{
                title: '填写套餐信息'
            }, {
                title: '选择菜品'
            }, {
                title: '完成'
            }]
        }); 

        var myfile;
        //第三：使用组件
        let uploadInst = upload.render({
            // 绑定浏览文件元素
            elem: '#browser-pic',

            // 设置允许上传的文件类型
            accept: 'file',

            // 设置允许上传的文件后缀
            exts: 'jpg|png|jpeg|gif|webp',

            // 设计允许上传文件的大小，单位：KB
            size: 10 * 1024,
                
            // 设置不自动上传
            auto: false,

            error: function (error) {			//上传失败的回调

            },
            choose: function (obj) {		//选择文件后的回调
                obj.preview(function (index, file, result) {
                    myfile=file;
                    //显示图片
                    $("#pic").prop("src", result);
                });
            }
        });

        var chkadd=[];//复选框添加菜品
        var radios;//用于存放所有单选框用于后面拿值
        var setMealId;

        form.on('submit(formStep)', function (data) {
            let datas=mytreelist;

            treetable.render({
            treeColIndex: 1,//层级关系展示在第几列
            treeSpid: -1,//是否有最高父id没有-1表示
            treeIdName:'var_TypeId',//每条数据id 字段
            treePidName:'parentId', //每条数据父id字段
            treeDefaultClose: true,
            elem:'#munu-table',//表单id
            data:datas,   
            code:0,
            page:false,
            toolbar: '#TPL-treeTable-demo',
            cols:[[
                {width:125,align:'center',title:'菜品选择',templet:function(d){
                 return d.isMenu==0?'':'<input lay-filter="mSepcsChk" type="checkbox"'+"value="+d.var_TypeId+'>';
                }},
                {field:"var_TypeName", width: 250,title: '规格名', align: 'center'},
                {field:'var_TypeId', width: 250, align: 'center', title: '规格编号'},
                {field:'isMenu', width: 205, align: 'center', templet: function (d) {
                        if (d.isMenu == 1) {
                            return '<span class="layui-badge layui-bg-gray">子级</span>';
                        }
                        if (d.isMenu == 0) {
                            return '<span class="layui-badge-rim">菜单</span>';                        
                        } 
                    }, title: '类型'
                }
            ]],
            done:function(){
                 radios=$("input[type='radio']");

                 //监听复选框
                 form.on('checkbox(mSepcsChk)',function(data)   {
                    let tr= $(this).closest('tr');
                    let mychkMid=data.elem.value;//复选框拿到的id
                    if(data.elem.checked){
                         chkadd.push(mychkMid)
                    }else{
                        for (let index = 0; index < chkadd.length; index++) {
                            if(mychkMid===chkadd[index]){
                                chkadd.splice(index,1);
                            }     
                        }   
                    }
                })
            }
        });                 

            if(myfile===null){
                layer.msg('请选择你要添加的套餐图',{icon:5,time:1000,shift:6});
				return false; 
            }

            if(data.field.setMealSpec===""){
                layer.msg('套餐规格不能为空',{icon:5,time:1000,shift:6});
				return false;	  
            }

            var formData = new FormData();  
            
            formData.append('mealName',data.field.mName);
            formData.append('mealPrice',data.field.mPrice);
            formData.append('mealDepict',data.field.mDepict);
            formData.append('mealChoice',data.field.setMealSpec);
            formData.append('mealStatus',data.field.mStatus);
            formData.append('varietyTypeId',1001);
            formData.append('mealFile',myfile);
            
             $.ajax({        
                type:"post",
                url:requrl+"meal/insertMeal",
                data:formData,
                processData: false, // 告诉 jQuery 不要去处理发送的数据 
                contentType: false, // 告诉 jQuery 不要去设置 Content-Type 请求头  
                success:function (res){
                    setMealId=res.data;
                }
            }) 
            step.next('#stepForm');//下一步(第一步结束)
            return false;
        });
        //套餐提交

        //返回和添加完数据清空填写数据
        function cleardata(){
            myfile=null;
            $('input[name="mName"]').val('');
            $('input[name="mPrice"]').val('');
            $('textarea[name="mDepict"]').val('');
            $('#pic').prop("src","../images/combo_02.webp");

            // // 找到第一个表单中的特定select元素  
            var $firstForm = $('form').first(); // 获取第一个form元素  
            var $mySelect = $firstForm.find('select[name="setMealSpec"]'); // 假设你的select有一个特定的name属性  
            $mySelect.find('option:eq(0)').prop('selected', true);      
            form.render('select');
        }

        //返回第一步
        $('.pre').click(function () {
        step.pre('#stepForm'); 
        cleardata();

        $.ajax({        
                type:"delete",
                url:requrl+"meal/deleteMeal?mealId="+setMealId,
                processData: false, // 告诉 jQuery 不要去处理发送的数据 
                contentType: false, // 告诉 jQuery 不要去设置 Content-Type 请求头  
                success:function (res){
                    // console.log(res);
            }
        })
    });    
    
        //菜品提交
        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            if(chkadd.length>0){
                for (let index = 0; index < chkadd.length; index++) {
                    $.ajax({        
                        type:"post",
                        url:requrl+"varietyMeal/insertVarietyMeal",
                        data:{mealId:setMealId,varietyId:chkadd[index]},
                        success:function (res){
                            setMealId=res.data;
                            // console.log(res.data);
                        }
                    })    
                }
            }    

            chkadd=[];
            setMealId=0;//初始化套餐id
            return false;
            return false;
        });
        
        //再来一餐
        $('.next').click(function () {
            cleardata();
            step.next('#stepForm');
        });

        //查看套餐
        $("#chkMeal").on('click',function(){
            var indexifr = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引

            var index= layui.layer.load(3, {  
            shade: [1,'#fff']  })//0.1透明度的白色背景 

            setTimeout(function(){
            parent.layer.close(indexifr); // 关闭当前 iframe 弹层  
            window.parent.postMessage('success', 'http://127.0.0.1:5500/index.html#/../html/speces_test02.html'); // '*' 表示目标源，慎用，建议使用具体的源          
            },1000)

            setTimeout(function(){    
            layui.layer.close(index); 
            // 更新元素         
            },1200); 
                    
        })

    })
</script>
</body>
</html>